<script lang="ts">
import { defineComponent, ref, watch, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
export default defineComponent({
  components: {},
  setup() {
    let router = useRouter()
    let route = useRoute()
    let active = ref(null)

    let btn_type = ref(1)
    console.log(active)
    let click_bottom_btn = (type: any) => {
      btn_type.value = type
      console.log(btn_type.value)
    }
    watch(btn_type, () => {
      console.log('btn_type变化了', btn_type.value)
      if (btn_type.value == 1) {
        router.push({ path: '/home' })
      } else if (btn_type.value == 2) {
        router.push({ path: '/handwrite' })
      } else if (btn_type.value == 3) {
        router.push({ path: '/search' })
      } else if (btn_type.value == 4) {
        router.push({ path: '/class' })
      } else if (btn_type.value == 5) {
        router.push({ path: '/userinfo' })
      }
    });
  
    return {
      active,
      click_bottom_btn,
      btn_type
    }
  }
})
</script>
<template>
  <div class="bottom_btn">
    <ul>
      <li @click="click_bottom_btn(1)">
        <div>
          <em class="iconfont icon-shouye1" v-if="btn_type == 1" style="font-size: 23px"></em>
          <span class="iconfont icon-shouye" v-else></span>
        </div>
        <p :class="{ active: btn_type == 1 }">首页</p>
      </li>
      <li @click="click_bottom_btn(2)">
        <div>
          <em class="iconfont icon-bijiben-copy" v-if="btn_type == 2" style="font-size: 18px"></em>
          <span class="iconfont icon-bijiben2" v-else></span>
        </div>

        <p :class="{ active: btn_type == 2 }">手记</p>
      </li>
      <li @click="click_bottom_btn(3)">
        <div>
          <em class="iconfont icon-sousuo4" v-if="btn_type == 3" style="font-size: 24px"></em>
          <span class="iconfont icon-sousuo1" v-else></span>
        </div>

        <p :class="{ active: btn_type == 3 }">搜索</p>
      </li>
      <li @click="click_bottom_btn(4)">
        <div>
          <em
            class="iconfont icon-boshimaobeifen"
            v-if="btn_type == 4"
            style="font-size: 20px"
          ></em>
          <span class="iconfont icon-boshimao" v-else></span>
        </div>

        <p :class="{ active: btn_type == 4 }">课堂</p>
      </li>
      <li @click="click_bottom_btn(5)">
        <div>
          <em
            class="iconfont icon-icon_kongtouxiang"
            v-if="btn_type == 5"
            style="font-size: 20px"
          ></em>
          <span class="iconfont icon-04" v-else></span>
        </div>

        <p :class="{ active: btn_type == 5 }">我的</p>
      </li>
    </ul>
  </div>
</template>
<style lang="scss" scoped>
.bottom_btn {
  background-color: #fff;
  width: 100%;
  height: 53px;
  z-index: 11;
  ul {
    height: 100%;
    display: flex;
    align-items: center;
    li {
      width: 20%;
      text-align: center;
      div {
        height: 26px;
      }
      span {
        font-size: 20px;
        color: #9e9e9e;
      }
      p {
        font-size: 14px;
        color: #9e9e9e;
        // margin-top: 9px;
        &.active {
          color: #191919;
        }
      }
      em {
        font-size: 22px;
        color: #191919;
      }
    }
  }
}
</style>